body{
	height:2000px;
}
#container{
	margin:130px auto;
	width:640px;
	height:360px;
	position:relative;
	/* overflow:hidden; */
	border-radius: 10px 0 10px 0;
}
.slider{
	width:100%;
	height:100%;
	-webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transform:rotateX(15deg) rotateY(5deg);
    -webkit-transform:rotateX(15deg) rotateY(5deg);
    -ms-transform:rotateX(15deg) rotateY(5deg);
    transform:rotateX(15deg) rotateY(0deg);
}
.item{
	width:25%;
	height:100%;
	position:absolute;
	-webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition : transform 2s;
}
.img{
	width:100%;
	height:100%;
	background-size:640px 360px;
	position:absolute;
}
.img:nth-child(1){
	background-image:url("../images/1.jpg");
	-moz-transform:rotateX(0) translateZ(180px);
    -webkit-transform:rotateX(0) translateZ(180px);
    -ms-transform:rotateX(0) translateZ(180px);
    transform:rotateX(0) translateZ(180px);
}
.img:nth-child(2){
	background-image:url("../images/2.jpeg");
	-moz-transform:rotateX(90deg) translateZ(180px);
    -webkit-transform:rotateX(90deg) translateZ(180px);
    -ms-transform:rotateX(90deg) translateZ(180px);
    transform:rotateX(90deg) translateZ(180px);
}
.img:nth-child(3){
	background-image:url("../images/3.jpeg");
	-moz-transform:rotateX(180deg) translateZ(180px);
    -webkit-transform:rotateX(180deg) translateZ(180px);
    -ms-transform:rotateX(180deg) translateZ(180px);
    transform:rotateX(180deg) translateZ(180px);
}
.img:nth-child(4){
	background-image:url("../images/4.jpg");
	-moz-transform:rotateX(270deg) translateZ(180px);
    -webkit-transform:rotateX(270deg) translateZ(180px);
    -ms-transform:rotateX(270deg) translateZ(180px);
    transform:rotateX(270deg) translateZ(180px);
}
.arrow{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	z-index:99998;
}
#container .arrow .switch{
	color:#fff;
	font-size:20px;
	background: rgba(0,0,0,0.2);
	width:40px;
	height:55px;
	line-height:55px;
	text-align:center;
	position:absolute;
	z-index:99999;
	top:calc(50% - 25px);
}
#container .arrow .switch:hover{
	cursor:pointer;
	background:rgba(100,180,255,0.1);
	border:solid rgba(150,200,255,0.3);
	border-width:0;
}
#prev{
	left:0;
	border-radius:0 5px 5px 0;
}
#next{
	right:0;
	border-radius:5px 0 0 5px;
}
